import { areaList } from '@vant/area-data';
import { carList, bookcaradd, carDetails } from "../../api/car.js"
import { captchaImage, getcodeNew } from "../../api/index.js"
const regx = /^1(3\d|4[5-9]|5[0-35-9]|6[2567]|7[0-8]|8\d|9[0-35-9])\d{8}$/;
Page({
  /**
   * 页面的初始数据
   */
  data: {
    $https: getApp().globalData.$https,
    carid: null,
    areaList,
    show: false,
    show1: false,
    show2: false,
    showNew: false,
    cellTxt: '选择城市',
    carTxt: '选择车型',
    categoryName: '',
    car: '',
    automoList: [{
      values: [],
    },
    {
      values: [],
    },
    ],
    name: '',
    phone: '',
    checked: false,
    code: '',
    city: '',
    province: '',
    obtain: '获取验证码',
    img_code: '',
    short: '',
    TIME_COUNT: 120, // 验证码倒计时60s
    count: '',
    issendcode: true,
    timer: null,
    cardetail: {},
    picker: null,
    index1:0,
    index2:0
  },
  onChoiceChange(event) {
    this.setData({
      checked: !this.data.checked,
    });
  },
  showPopup() {
    this.setData({
      show: true
    });

  },
  async signClick() {
    var {
      name,
      phone,
      city,
      province,
      code,
      categoryName,
      car,
      checked
    } = this.data
    if (name == '') {
      wx.showToast({
        title: '请输入姓名',
        icon: 'none'
      })
      return
    }
    if (categoryName == '') {
      wx.showToast({
        title: '请选择车系',
        icon: 'none'
      })
      return
    }
    if (car == '') {
      wx.showToast({
        title: '请选择车型',
        icon: 'none'
      })
      return
    }
    if (phone == '') {
      wx.showToast({
        title: '请输入手机号',
        icon: 'none'
      })
      return
    }
    if (!regx.test(phone)) {
      wx.showToast({
        title: '请填写正确的手机号',
        icon: 'none'
      })
      return
    }
    if (city == '') {
      wx.showToast({
        title: '请选择城市',
        icon: 'none'
      })
      return
    }
    if (province == '') {
      wx.showToast({
        title: '请选择省份',
        icon: 'none'
      })
      return
    }
    if (code == '') {
       wx.showToast({
        title: '请输入验证码',
        icon: 'none'
      })
      return
    }
    if (!checked) {
       wx.showToast({
        title: '请阅读并同意隐私条款',
        icon: 'none'
      })
      return
    }
    let data = {
      name,
      phone,
      city,
      province,
      params: {
        code
      },
      categoryName,
      car
    };
    var res = await bookcaradd(data)
    if (res.code == 200) {
      wx.showToast({
        title: '预约成功！',
        success: function () {
          setTimeout(function () {
            wx.navigateBack({
              delta: 1,
            })
          }, 2000);
        }
      })
    }
    this.captchaImage()
  },
  onInputChange(e) {
    this.setData({
      name: e.detail
    })
  },
  onphoneChange(e) {
    this.setData({
      phone: e.detail
    })
  },
  shortChange(e) {
    this.setData({
      code: e.detail
    })
  },
  graphicalChange(e) {
    this.setData({
      img_code: e.detail
    })
  },
  onClose1() {
    this.setData({
      show: false
    });
  },
  onClose() {
    this.setData({
      showNew: false
    });
  },
  clickmm(){
    this.setData({
      showNew: false
    });
  },
  autoPopup() {
    this.setData({
      showNew: true
    });
    const picker = this.selectComponent('#picker') //获取组件实例
    picker.setColumnIndex(0, this.data.index1)
    picker.setColumnIndex(1, this.data.index2)
  },
  onAutomoCancel(e) {
    this.setData({
      showNew: false,
    });

    var id = this.data.automoList[0].values[this.data.index1].id
    this.carList(id);
  },
  Privacy() {
    wx.navigateTo({
      url: '../agreement/index',
    })
  },
  clickXieyi() {
    this.setData({
      show1: true
    })
  },
  clickYinsi() {
    this.setData({
      show2: true
    })
  },
  useAgree(e) {
    var checked = e.detail.checked
    this.setData({
      checked: checked
    })
  },

  onAutomoConfirm(e) {
    console.log(e,"onAutomoConfirm")
    var indexarr = e.detail.index;

    var value = e.detail.value;
    console.log(value)
    this.setData({
      index1:indexarr[0],
      index2:indexarr[1],
      categoryName: value[0].name,
      car: value[1] ? value[1].name : '',
      showNew: false,
      carTxt: value[0].name + (value[1] ? value[1].name : ''),
      carid: value[1] ? value[1].id : this.data.carid,
    });
    this.getdetail(this.data.carid)
  },
  wancheng(e) {
    this.setData({
      show: false,
      cellTxt: e.detail.values[0].name + e.detail.values[1].name,
      city: e.detail.values[1].name,
      province: e.detail.values[0].name,
    });
  },
  quxiao(e) {
    this.setData({
      show: false
    });
  },
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    if(options.id){
      this.setData({
        carid: options.id
      })
    }else{
      this.setData({
        carid:'1'
      })
    }
 
    // this.getcardetail()
    this.captchaImage()
  },
  onReady() {
    const picker = this.selectComponent('#picker') //获取组件实例
    var index1 = 0;
    var index2 = 0;
    var _this = this;
    carDetails(this.data.carid).then(res => {
      _this.setData({
        cardetail: res.data,
      })
      var id = res.data.carCategoryId
      carList(id).then(res => {
        console.log('获取参数')
        res.category.map(function (item, index) {
          if (item.id == id) {
            
            _this.setData({
              categoryName: item.name,
              index1 :index
            })
          }
        })
        res.list.map(function (item, index) {
          if (item.id == _this.data.carid) {
            
            _this.setData({
              car: item.name,
              index2 : index
            })
          }
        })
        console.log(index1, index2)
        // var pinker = this.$mp.page.selectComponent('#picker')
        // var pinker = this.selectComponent('#picker').getIndexes()
        // console.log(pinker)
        // this.data.automoList[0].values=;
        // var pick = [
        //   {
        //     value:[1,2,3,4,5],
        //     defaultIndex:index1
        //   },
        //   {
        //     value:[1,2,4,5,6,7],
        //     defaultIndex:index2
        //   }
        // ];
        // console.log
        this.setData({
          "automoList[0].values": res.category,
          "automoList[1].values": res.list,
          carTxt: this.data.categoryName + this.data.car
        })
      })
    })
    console.log('read')

  },
  getcardetail() {

  },
  getdetail(id) {
    carDetails(id).then(res => {
      this.setData({
        cardetail: res.data,
      })
    })
  },
  async carList(id) {
    var res = await carList(id)
    this.setData({
      "automoList[0].values": res.category,
      "automoList[1].values": res.list,
    })
  },
  onChange(e) {
    var value = e.detail.value;
    console.log(value)
    this.carList(value[0].id);
  },
  async captchaImage() {
    var res = await captchaImage()
    this.setData({
      img: res.img = 'url(data:image/gif;base64,' + res.img + ')',
      uuid: res.uuid
    })
  },
  async obtainClick() {
    var {
      phone,
      img_code,
      uuid
    } = this.data
    let data = {
      phone,
      img_code,
      uuid
    }
    var res = await getcodeNew(data)
    if (res.code == 200) {
      wx.showToast({
        title: '验证码已发送至您的手机，请注意查收~',
        icon: "none"
      })
      if (!this.data.timer) {
        const phoneNumber = String(phone)
        this.setData({
          count: this.data.TIME_COUNT,
          issendcode: false
        })
        this.data.timer = setInterval(() => {
          if (this.data.count > 0 && this.data.count <= this.data.TIME_COUNT) {
            this.setData({
              count: this.data.count - 1
            })
          } else {
            clearInterval(this.data.timer)
            this.data.timer = null
            this.setData({
              issendcode: true
            })
          }
        }, 1000)
      }
    } else if (res.code == 500) {
      this.captchaImage()
      wx.showToast({
        title: res.msg,
        icon: "none"
      })
    }
  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})